<template>
  <el-table :height="height" :data="list" border stripe>
    <el-table-column prop="id" label="员工ID"></el-table-column>
    <el-table-column prop="name" label="员工名称"></el-table-column>
    <el-table-column prop="salary" label="工资"></el-table-column>
    <el-table-column prop="commission" label="奖金"></el-table-column>
    <el-table-column prop="departmentId" label="部门ID"></el-table-column>
    <el-table-column label="操作" width="220" align="center">
      <template #default="scope">
        <el-button type="primary"
                   :icon="Edit"
                   size="default"
                   @click="handleEditClick(scope.row)">
          编辑
        </el-button>
        <el-button type="danger"
                   :icon="Delete"
                   size="default"
                   @click="handleDeleteClick(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import { onMounted, toRefs } from 'vue'
import type { EmployeeInfo } from '@/hooks/employee.hook.type.ts'
import { emitter, useEmployeeStore } from '@/stores/employee.store.ts'
import { storeToRefs } from 'pinia'
import { useEmployeeTable } from '@/hooks/employee.hook.ts'

const store = useEmployeeStore()
const { table } = storeToRefs(store)
const {
  height, list
} = toRefs(table.value)
const {
  fetchDataForList,
  chooseCurrentEmployee,
  deleteCurrentEmployee
} = useEmployeeTable()

const {} = store

function handleEditClick(row: EmployeeInfo) {
  chooseCurrentEmployee(row)
  emitter.emit('table_edit_btn_clicked')
}

function handleDeleteClick(row: EmployeeInfo) {
  deleteCurrentEmployee(row.id).then(() => {
    emitter.emit('table_employee_deleted')
  })
}

function search() {
  fetchDataForList().then(() => {
    height.value = window.innerHeight - 230
  })
}

function remove() {
}

onMounted(() => {
  search()
  emitter.on('search_search_btn_clicked', search)
  emitter.on('search_reset_btn_clicked', search)
  emitter.on('pagination_page_size_changed', search)
  emitter.on('pagination_current_page_changed', search)
  emitter.on('table_delete_btn_clicked', remove)
  emitter.on('table_employee_deleted', search)
  emitter.on('dialog_employee_added', search)
  emitter.on('dialog_employee_updated', search)
})
</script>

<style scoped lang="scss">

</style>
